<div class="page page-table" data-ng-controller="marketsCtrl">

    <div class="row">
        <div class="col-md-6">
            <ol class="breadcrumb">
                <li><a href="#/">Home</a></li>
                <li><a href="#/markets/">Markets</a></li>
                <li class="active"><a href="#/markets/{{ticker.base}}/{{ticker.quote}}/">{{ticker.base}}/{{ticker.quote}}</a></li>
            </ol>
        </div>
        <div class="col-md-6">
        </div>
    </div>

    <div class="row">
        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.price | number: ticker.base_precision}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="CURRENT PRICE"></span></p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.ask | number: ticker.base_precision}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="LAST ASK"></span></p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.bid | number: ticker.base_precision}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="LAST BID"></span></p>
                </div>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.base_volume | number}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="{{ticker.base}} VOLUME"></span></p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.quote_volume | number}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="{{ticker.quote}} VOLUME"></span></p>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel mini-box">
                <div class="box-info">
                    <p class="size-h3">{{ticker.perc_change | number:2}}<span class="size-h4"></span></p>
                    <p class="text-muted text-small"><span data-translate="24 HS % CHANGE"></span></p>
                </div>
            </div>
        </div>

    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Price Chart</div>
                <div class="panel-body table-responsive">
                    <!-- <div data-echarts data-options="pricechart.options"  style="height: 400px;"></div> -->
                    <div id="tv_chart_container"></div>
                </div>
            </div>
        </div>
    </div>
<h2>Order Book</h2>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Sell Orders</div>
                <div class="panel-body table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="text-align:right;" ng-click='sortColumn("price1")' ng-class='sortClass("price1")'>Price</th>
                                <th style="text-align:right;" ng-click='sortColumn("quote1")' ng-class='sortClass("quote1")'>{{ticker.quote}}</th>
                                <th style="text-align:right;" ng-click='sortColumn("base1")' ng-class='sortClass("base1")'>{{ticker.base}}</th>
                                <th style="text-align:right;" ng-click='sortColumn("total1")' ng-class='sortClass("total1")'>Total({{ticker.base}})</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr data-ng-repeat="a in asks | orderBy:columnToSort:reverse">
                            <td style="text-align:right;">{{a.price1 | number: a.base_precision}}</td>
                            <td style="text-align:right;">{{a.quote1 | number: a.quote_precision}}</td>
                            <td style="text-align:right;">{{a.base1 | number: a.base_precision}}</td>
                            <td style="text-align:right;">{{a.total1 | number: a.base_precision}}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Buy Orders</div>
                <div class="panel-body table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align:right;" ng-click='sortColumn2("price2")' ng-class='sortClass2("price2")'>Price</th>
                            <th style="text-align:right;" ng-click='sortColumn2("base2")' ng-class='sortClass2("base2")'>{{ticker.base}}</th>
                            <th style="text-align:right;" ng-click='sortColumn2("quote2")' ng-class='sortClass2("quote2")'>{{ticker.quote}}</th>
                            <th style="text-align:right;" ng-click='sortColumn2("total2")' ng-class='sortClass2("total2")'>Total({{ticker.base}})</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-ng-repeat="b in bids | orderBy:columnToSort2:reverse2">
                            <td style="text-align:right;" class="align-right">{{b.price2 | number: b.base_precision}}</td>
                            <td style="text-align:right;" class="align-right">{{b.base2 | number: b.base_precision}}</td>
                            <td style="text-align:right;" class="align-right">{{b.quote2 | number: b.quote_precision}}</td>
                            <td style="text-align:right;">{{b.total2 | number: b.base_precision}}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <h2>Grouped Order Book</h2>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Sell Orders Groups</div>
                <div class="panel-body table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align:right;" ng-click='sortColumn3("min_price3")' ng-class='sortClass3("min_price3")'>Min</th>
                            <th style="text-align:right;" ng-click='sortColumn3("max_price3")' ng-class='sortClass3("max_price3")'>Max</th>
                            <th style="text-align:right;" ng-click='sortColumn3("total_for_sale3")' ng-class='sortClass3("total_for_sale3")'>Total({{ticker.base}})</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-ng-repeat="sg in sell_grouped | orderBy:columnToSort3:reverse3">
                            <td style="text-align:right;">{{sg.max_price | number: sg.base_precision}}</td>
                            <td style="text-align:right;">{{sg.min_price | number: sg.base_precision}}</td>
                            <td style="text-align:right;">{{sg.total_for_sale | number: sg.base_precision}}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Buy Orders Groups</div>
                <div class="panel-body table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align:right;" ng-click='sortColumn4("min_price4")' ng-class='sortClass4("min_price4")'>Min</th>
                            <th style="text-align:right;" ng-click='sortColumn4("max_price4")' ng-class='sortClass4("max_price4")'>Max</th>
                            <th style="text-align:right;" ng-click='sortColumn4("total_for_sale4")' ng-class='sortClass4("total_for_sale4")'>Total({{ticker.base}})</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-ng-repeat="bg in buy_grouped | orderBy:columnToSort4:reverse4">
                            <td style="text-align:right;">{{bg.min_price | number: bg.base_precision}}</td>
                            <td style="text-align:right;">{{bg.max_price | number: bg.base_precision}}</td>
                            <td style="text-align:right;">{{bg.total_for_sale | number: bg.base_precision}}</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


